<template>
    <div>
        <!-- el-upload 这是elementui封装好的组件，内部也是使用ajax，所以也存在跨域问题 -->
        <!-- action="https://jsonplaceholder.typicode.com/posts/" 指定图片上传的接口 -->
        <!-- name="good" 长传图片的名称，后端使用这个名称接收图片 -->
        <!-- multiple 可以上传多张图片 drag 拖拽上传 -->
        <el-upload class="upload-demo" drag name="good" action="https://jsonplaceholder.typicode.com/posts/" multiple :show-file-list="false" :on-success="imgSuccess">
            
            <template #trigger>
                <div v-if="value">
                    <el-image :src="url"></el-image>
                </div>
                <div v-else>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </div>
            </template>

            <template #tip>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </template>
            
            <!-- <template>
                <div>
                    <input type="file" @change="onFileChange" />
                    <img :src="imageUrl" v-if="imageUrl" alt="Selected Image" />
                </div>
            </template> -->
            
            
        </el-upload>
    </div>
</template>

<script>
export default {
    name:"ImgUpload",
    props:{
        value: {
            type:String,
            default:""
        }
    },
    data() {
        return {
           imageUrl: null, // 存储图片的 URL
        };
    },
    methods: {
        onFileChange(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
            this.imageUrl = e.target.result; // 将文件的内容赋值给 imageUrl
            };
            reader.readAsDataURL(file); // 读取文件为 DataURL
        }
        },
        // 照片上传成功
        imgSuccess(){
            console.log('成功')
        }
    },
}
</script>

<style scoped>
    .el-image {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
</style>